<template>
  <div class="_components_user-message-reply_img">
    <div class="choose-img" @click="openDialog">
      <img v-if="path" :src="path" alt="">
      <i v-else class="el-icon-plus" />
    </div>
    <el-dialog title="素材库图片" :close-on-click-modal="false" :visible.sync="innerVisible" append-to-body>
      <UploadBtn :file-filter="['bmp', 'png', 'jpeg', 'gif']" :max-size="2" class="mb15" @setUrl="addUrl" />
      <ul class="img-list" style="width:100%;text-align:left;">
        <li v-for="(item, index) in list" :key="index" style="width:80px;display:inline-block;margin:0 10px 10px 0;" @click="chooseImg(item, index)">
          <div v-if="active === index" class="item active" style="box-sizing:border-box;width:80px;height:80px;position:relative;border:2px solid #07d;position:relative;">
            <img :src="item.path" alt="" style="width:100%;height:100%;">
            <div style="position:absolute;display:block;content:'';right:0;bottom:0;border:14px solid #07d;border-left-color:transparent;border-top-color:transparent;z-index:1;" />
            <i class="el-icon-check" style="position:absolute;bottom:0;right:0;color:#fff;z-index:2;" />
          </div>
          <div v-if="active !== index" class="item" style="box-sizing:border-box;width:80px;height:80px;position:relative;border:2px solid rgba(1,1,1,0);">
            <img :src="item.path" alt="" style="width:100%;height:100%;">
          </div>
        </li>
      </ul>
      <vxe-pager
        :current-page.sync="pageNum"
        :page-size.sync="pageSize"
        :total="total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getList(-1)"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadBtn from '@/components/upload/uploadBtn'
import { listMediaSource, addMediaSource } from '@/api/wxMp'

export default {
  components: { UploadBtn },
  props: {
    setinfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      path: '',
      innerVisible: false,
      list: [],
      pageNum: 1,
      pageSize: 20,
      total: 1,
      info: {},
      active: -1
    }
  },
  mounted() {
    if (this.setinfo.sourceType === 'image' || this.setinfo.sourceType === 'thumb') {
      this.path = this.setinfo.path
    }
  },
  methods: {
    addUrl(path, name = '') {
      addMediaSource({ appId: this.setinfo.appId, sourceType: this.setinfo.type, name, path, remark: '' }).then(res => {
        this.info.id = res
        this.info.path = `http://file-sit.ibeeking.com/${path}`
        this.getList(0)
      })
    },
    chooseImg(info, index) {
      this.info = info
      this.active = this.active === index ? -1 : index
    },
    getList(i) {
      listMediaSource({ appId: this.setinfo.appId, sourceType: this.setinfo.type, asyncStatus: this.setinfo.asyncStatus, name: '', pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
        this.active = i
        this.list = res.records
        this.total = res.total
        this.innerVisible = true
      })
    },
    openDialog() {
      this.pageNum = 1
      this.getList(-1)
      this.innerVisible = true
    },
    clickSure() {
      this.path = this.info.path
      this.$emit('getInfo', this.info)
      this.innerVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
._components_user-message-reply_img {
  width: 100px;
  display: flex;
  justify-content: space-between;
  >.choose-img {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
